<template>
  <!-- 统计分析 -->
  <div class="tjfx flex flex-column">
    <van-nav-bar title="统计分析" left-arrow @click-left="onClickLeft" />
    <div class="top rel flex-center font-12">
      <div class="form color333 flex flex-center" @click="showcalendar = true">
        <!-- <span class="label">统计时间：</span> -->
        <img class="img" src="../../../../assets/imgs/reconsitution/statistics/icon_date.png" alt="" />
        <span class="select rel">{{ form.web_starttime + ' - ' + form.web_endtime }}</span>
        <img class="img" src="../../../../assets/imgs/reconsitution/statistics/jt_xl.png" alt="" />
      </div>
    </div>
    <div class="flex-1 main-box">
      <van-collapse class="listBg" v-model="activeNames">
        <van-collapse-item name="1" :value="activeNames.includes('1') ? '收起' : '展开'">
          <template #title>
            <div class="collapse-title"><img class="icon" src="../../../../assets/imgs/reconsitution/icon_chly.png"
                alt="" /><span class="label">晨会录音</span> </div>
          </template>
          <div class="">
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
              class="listTable">
              <div class="list-item" v-for="(item, index) in tableList" :key="index">
                <div class="lableDate">{{item.DAY_ID}}</div>
                <div class="timeRange flex flex-center flex-between">
                  <div class="timeRange-left flex flex-center">
                    <span class="label">开始时间</span>
                    <span class="time">{{item.START_TIME}}</span>
                  </div>
                  <!-- <img src="../../../../assets/imgs/reconsitution/icon_arrow_right.png" alt="" height="10" /> -->
                  <div class="timeRange-right flex flex-center">
                    <span class="label">结束时间</span>
                    <span class="time">{{item.END_TIME}}</span>
                  </div>
                </div>
                <div v-if="item.FILE_ID" style=" text-align: center;">
                  <van-button v-if="!item.isShowAudio" @click="onPlay(item,index)" plain type="info" style="width: 50%;height: 32px;margin-top: 10px;" :loading="item.isShowAudio">{{item.isShowAudio?'正在加载录音文件':'播放录音'}}</van-button>
                  <!-- <recordingItem style="flex:1" :ref="'recordItem' + '1'" :audioUrl="'url'"></recordingItem> -->
                  <recordingItem v-else style="flex:1" :ref="'recordItem' + '1'" :audioUrl="audioUrlItem"></recordingItem>
                </div>

              </div>
            </van-list>
          </div>
        </van-collapse-item>
      </van-collapse>
    </div>
    <van-calendar title="选择时间范围" color="#1890ff" type="range" v-model="showcalendar" @confirm="handleConfirm"
      :min-date="minDate" :default-date="defaultDate" />
  </div>
</template>

<script>
import store from '@/store/'
import { getTable, getUrl } from '@/api/publicline/chbb.js'
import moment from 'moment'
import recordingItem from './recordingItem'
import { showZwtNav } from '@/utils/showNav.js'
const UA = window.navigator.userAgent.toLowerCase()
export default {
  name: 'sumAnalysis',
  components: { recordingItem },
  data() {
    return {
      moment,
      active: '0',
      showcalendar: false,
      defaultDate: [],
      minDate: new Date(2020, 0, 1),
      form: {
        web_starttime: '',
        web_endtime: '',
      },
      activeNames: ['1'],
      tableList: [],
      loading: false,
      finished: false,
      pageNo: 1,
      pageSize: 10,
      st:'',
      et:'',
      audioUrlItem:''
    }
  },

  mounted() {
    const currentDate = new Date()
    const currentYear = currentDate.getFullYear()
    const currentMonth = currentDate.getMonth()
    const firstDayOfMonth = new Date(currentYear, currentMonth, 1)
    this.defaultDate = [firstDayOfMonth, currentDate]
    this.form = {
      web_starttime: this.formatDate(firstDayOfMonth),
      web_endtime: this.formatDate(currentDate),
    }
    this.st = this.formatDateSumbit(firstDayOfMonth)
    this.et = this.formatDateSumbit(currentDate)
    this.onLoad()
    showZwtNav(this.$route.meta.title)
  },
  methods: {
    onClickLeft() {
      // this.$router.push({
      //   path: '/publicline',
      // })
      if (process.env.NODE_ENV == 'production') {
        const isZWT = UA && /ipumobile/.test(UA)
        if (isZWT) {
          window.WadeMobile && window.WadeMobile.closeH5()
          return
        }
        boncAppEngine.shutdown()
        this.$open('/publicline/index')
      } else {
        this.$open('/publicline/index')
      }
      store.commit('SET_ISACTIVE', null)
      sessionStorage.removeItem('actives')

    },
    formatDate(date) {
      let month = date.getMonth() + 1
      month < 10 && (month = '0' + month)
      let day = date.getDate()
      day < 10 && (day = '0' + day)
      return `${date.getFullYear()}年${month}月${day}日`
    },
    formatDateSumbit(date) {
      let month = date.getMonth() + 1
      month < 10 && (month = '0' + month)
      let day = date.getDate()
      day < 10 && (day = '0' + day)
      return `${date.getFullYear()}-${month}-${day}`
    },
    handleConfirm(date) {
      const [start, end] = date
      this.form = {
        web_starttime: this.formatDate(start),
        web_endtime: this.formatDate(end),
      }
      this.st = this.formatDateSumbit(start)
      this.et = this.formatDateSumbit(end)
      this.showcalendar = false
      this.onLoad()
    },
    async onLoad() {
      let gridId = localStorage.getItem('$gridId')
      try {
        this.loading = true;
        const res = await getTable({
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          web_starttime: this.st,
          web_endtime: this.et,
          dataId:'7',
          grid: gridId
        });
        const {result} = res
        // console.log("🚀 ~ onLoad ~ res:", res)
        let filterList = JSON.parse(result)
        filterList.data.list.map((its) => {
          its.isShowAudio = false
        })
        console.log("🚀 ~ filterList.data.list.map ~  filterList.data.list:",  filterList.data.list)
        this.tableList = [...this.tableList, ...filterList.data.list || []];
        // this.tableList = [...this.tableList, ...res.data.list];
        this.loading = false;

        if (filterList.data.list.length < this.pageSize) {
          this.finished = true;
        } else {
          this.pageNo++;
        }
      } catch (error) {
        this.loading = false;
        console.error(error);
      }
    },
    onPlay(item, idx) {
      item.isShowAudio = true
      getUrl({ id: item.FILE_ID })
        .then(async (v) => {
          const { result } = v
          this.audioUrlItem = result
          console.log("🚀 ~ .then ~ his.localAudioUrl:", this.audioUrlItem)
          item.isShowAudio = false
            this.tableList = this.tableList.map((item, index) => ({
              ...item,
              isShowAudio: index === idx
            }));
        })
        .catch((_) => {
          console.log("🚀 ~ downFileUrl ~ _:", _)
          item.isShowAudio = false
        })
      // this.tableData = this.tableData.map((item, index) => ({
      //         ...item,
      //         isShowAudio: index === idx
      //       }));
    }

  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/reconsitution/common.less';

.tjfx {
  height: 100vh;

  .top {
    margin-top: 48px;
    width: 100%;
    height: 11.7333vw;
    line-height: 11.7333vw;
    padding: 0 4vw;
    background: #ffffff;
    box-shadow: 0 0.2667vw 1.0667vw 0.2667vw #f3f7fa;
    font-size: 4.5333vw;
    box-sizing: border-box;

    // .form-container {
    // background: #fff;
    // margin-bottom: 2.1333vw;
    // padding: 3.2vw 5.3333vw;
    .form {
      // margin-bottom: 5.3333vw;
      flex-wrap: wrap;


      .img {
        width: 3.7333vw;
        height: 3.7333vw;
      }
    }

    .select {
      // width: 53.3333vw;
      // overflow: hidden;
      // white-space: nowrap;
      // text-overflow: ellipsis;
      display: inline-block;
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #333333;
      text-align: center;
      font-weight: 400;
      padding: 0 10px;

      .label {
        flex-shrink: 0;

      }

      // }
    }
  }

  .main-box {
    overflow-y: auto;
  }
}

/deep/ .van-nav-bar {
  position: fixed;
  width: 100%;
}

/deep/ .van-tabs__wrap {
  position: fixed;
  width: 100%;
  margin-top: 46px;
  z-index: 9;
}

/deep/ .van-nav-bar__content {
  background: linear-gradient(134deg, #80d9f9 0%, #5466fa 100%);
}

/deep/ .van-nav-bar__title {
  font-size: 18px;
  color: #ffffff;
  letter-spacing: -0.6px;
  text-align: center;
}

/deep/ .van-nav-bar .van-icon {
  color: #fff;
  font-size: 20px;
}

/deep/ .van-tabs__line {
  width: 20px;
  margin-bottom: 3px;
}

/deep/ .van-tabs__nav--line {
  margin-bottom: 10px
}

/deep/ .van-tab__text {
  font-size: 15px;
  color: #333333;
  letter-spacing: -0.53px;
}

.collapse-title {
  width: 100%;

  .label {
    display: inline-block;
    font-family: PingFangSC-Semibold;
    font-size: 18px;
    color: #333333;
    letter-spacing: -0.21px;
    font-weight: 600;
    margin-left: 8px;
  }

  .icon {
    width: 38px;
    height: 38px;
  }
}

/deep/.van-collapse {
  margin: 10px;
  background: #fff;
}

.listBg {
  /deep/ .van-cell {
    // margin-top: 4px;
    padding: 8px 10px 0 10px !important;
    background-image: linear-gradient(180deg, rgba(194, 220, 255, 0.18) 0%, rgba(255, 255, 255, 0.50) 100%) !important;
    border-radius: 6px 6px 0px 0px;

  }

  /deep/ .van-collapse-item__content {
    // margin: 14px 10px;

    //   background-color: linear-gradient(180deg, rgba(194,220,255,0.18) 0%, rgba(255,255,255,0.50) 100%);
    // border-radius: 6px 6px 0px 0px;
  }
}

.listTable {
  // .listTable {
  max-height: 60vh; /* 必须设置固定高度 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* iOS平滑滚动 */
// }
  .list-item {
    // height: 200px;
    padding: 10px;
    margin-bottom: 10px;
    background-image: linear-gradient(180deg, rgba(194, 220, 255, 0.18) 0%, rgba(255, 255, 255, 0.50) 100%);
    border-radius: 6px;
    border: 1px solid #ebf3ff;

    .lableDate {
      font-family: PingFangSC-Medium;
      font-size: 14px;
      color: #333333;
      letter-spacing: -0.16px;
      font-weight: 500;
      margin-bottom: 10px;
    }

    .timeRange {
      .label {
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #999999;
        letter-spacing: 0;
        line-height: 18px;
        font-weight: 400;
      }

      .time {
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #333333;
        letter-spacing: 0;
        line-height: 18px;
        font-weight: 400;
        margin-left: 8px;
      }
    }

  }
}

.collapse-status {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #969799;
  font-size: 14px;
}
</style>